// 由于查询参数较多且每次请求都要带上这些参数所以提前存入对象方便复用
const query = {
  pagenum: 1, //	是	int	页码值
  pagesize: 2,	//是	int	每页显示多少条数据
  cate_id: '',	//否	string	文章分类的 Id
  state: '',	//否	string	文章的状态，可选值有：已发布、草稿
}

// ==============================发请求获取文章列表渲染=============================
getArticleList()
function getArticleList() {
  axios.get('/my/article/list', { params: query }).then(({ data: { data, total } }) => {
    const htmlStr = data.map(ele => {
      const { Id, cate_name, pub_date, state, title } = ele
      return `
        <tr>
            <td>${title}</td>
            <td>${cate_name}</td>
            <td>${pub_date}</td>
            <td>${state}</td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id="${Id}">编辑</button>
              <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete" data-id="${Id}">删除</button>
            </td>
          </tr>
  `}).join('')
    $('#list').html(htmlStr)

    // 分页渲染
    renderPage(total)
  })
}

const form = layui.form
const layer = layui.layer
//  ==============================获取文章分类列表填充到分类下拉框中=============================
axios.get('/my/article/cates').then(({ data: { data } }) => {
  const htmlStr = data.map(ele => {
    const { Id, name } = ele
    // 将option的value值设置为Id,因为后端需要根据Id来知道前端选择了哪个选项
    return `<option value="${Id}">${name}</option>`
  }).join('')
  // 为了不覆盖掉原本存在的“所有分类”选项所以使用append方法
  $('#cateSelect').append(htmlStr)
  //刷新select选择框渲染
  // https://www.ilayuis.com/doc/modules/form.html#render
  form.render('select')
})


//  ==============================筛选功能=============================
$('#form').on('submit', function (e) {
  e.preventDefault()
  // 通过修改查询参数对象中的值来限定后端返回的数据从而实现筛选功能
  // 通过下拉框selection的value值拿到选择的分类Id和状态值
  query.cate_id = $('#cateSelect').val()
  query.state = $('#stateSelect').val()
  // 每次筛选完回到第一页查看筛选结果
  query.pagenum = 1
  // 带上修改后的查询参数对象获取文章列表并渲染
  getArticleList()
})


//  ==============================分页功能=============================
// https://www.ilayuis.com/doc/modules/laypage.html
const laypage = layui.laypage
/* 渲染分页需要服务器返回的数据总条数，和查询参数对象中的每页显示数据数和当前所在页数，
所以需要在请求文章列表数据成功后调用分页渲染函数 */
function renderPage(total) {
  //执行一个laypage实例
  laypage.render({
    elem: 'page-box', //注意，这里的 page-box 是 ID，不用加 # 号
    count: total, //数据总数，从服务端得到
    limit: query.pagesize,//每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
    curr: query.pagenum,//起始页
    limits: [1, 2, 4, 6, 8, 10],//每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框
    layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'], //自定义排版
    // 当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
    /*注： jump在renderPage()被调用的时候也会触发，这种情况被称为首次，此时first为true，*/
    jump: function (obj, first) {
      //obj包含了当前分页的所有参数，比如：
      // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
      // console.log(obj.limit); //得到每页显示的条数
      query.pagenum = obj.curr
      query.pagesize = obj.limit
      /*注： getArticleList()=>renderPage(total)=>jump=>getArticleList()
      如果 getArticleList() 写在此处会发生循环调用，会不停地发出请求，
      解决方法就是让getArticleList()在jump回调被父函数renderPage连坐时不触发，只在切换分页时触发，也就是首次不执行getArticleList()*/
      //首次不执行
      if (!first) {
        getArticleList()
      }
    }
  })
}

//  ==============================删除文章功能=============================
// 事件委托
$('#list').on('click', '.btn_delete', function () {
  const Id = $(this).attr('data-id')
  layer.confirm('确认删除此文章？', { icon: 3, title: '提示' }, function (index) {
    axios.get('/my/article/delete/' + Id).then(({ data: { status, message } }) => {
      if (status !== 0) return layer.msg(message)
      layer.msg(message)
      // 关闭弹出层
      layer.close(index)
      /* bug:如果当前页的最后一条数据被删除，服务器返回的还是当前页的数据是空数组，此时应当展示上一页数据（分页器的页码值是根据总数和每页展示数计算的，会自动跳到上一页） */
      // 如果本页删除按钮的数量为1，删除这最后一条数据后让页码值手动减1后再发请求，如果当前页即已是最后一页就不用减1，因为数据已经全部被删除了
      if ($('.btn_delete').length === 1) {
        query.pagenum = query.pagenum === 1 ? 1 : query.pagenum - 1
      }
      // 重新获取文章列表
      getArticleList()
    })
  })
})


// ========================编辑功能====================
// 点击编辑按钮跳转到文章编辑页面
$('#list').on('click', '.btn_edit', function () {
  const Id = $(this).attr('data-id')
  // 跳转时用查询字符串方式带上当前需要修改的文章的Id
  location.href = '/article/art_edit.html?id=' + Id
})